<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <div>{{ $route.params.id }} + {{ $route.params.ids }}</div> -->
    <!-- <div>这是props:{{ query }}</div> -->
    <div>
      <button @click="show = !show">Toggle show</button>
      <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet</p>
      </transition>
    </div>
    <router-view></router-view>

    <!-- 插槽的实例应用 -->
    <base-layout :lists="list">
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
      <template slot-scope="user1">
        <span v-for="(item, index) in user1.data" :key="index">{{ item }}</span>
      </template>
      <!-- <template slot-scope="a">
        {{ a }}
      </template> -->

      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </base-layout>
  </div>
</template>
<script>
import baseLayout from "./layout"; //子组件
export default {
  // props:["query"],
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    next();
  },
  components: {
    baseLayout
  },
  data() {
    return {
      show: true
    };
  }
};
</script>
<style lang="scss">
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
